<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="220px" class="sidebar">
                <div class="logo">
                    <el-icon style="font-size: 32px; color: #1abc9c; margin-right: 8px;">
                        <Menu />
                    </el-icon>
                    <span class="title">智慧会议管理平台</span>
                </div>
                <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#111" text-color="#fff"
                    active-text-color="#1abc9c" router>
                    <el-menu-item index="1">
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/meetinglist">
                        <el-icon>
                            <OfficeBuilding />
                        </el-icon>
                        <span>会议室管理</span>
                    </el-menu-item>
                    <el-menu-item index="/meetingreservationlist">
                        <el-icon>
                            <AlarmClock />
                        </el-icon>
                        <span>会议预约</span>
                    </el-menu-item>
                    <el-menu-item index="/approverreservationlist">
                        <el-icon>
                            <FolderChecked />
                        </el-icon>
                        <span>会议审批</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <el-icon>
                            <DataAnalysis />
                        </el-icon>
                        <span>统计分析</span>
                    </el-menu-item>
                    <el-sub-menu index="6">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="/loginlist">用户管理(软删除)</el-menu-item>
                        <el-menu-item index="/usermanagementlist">用户管理(效果)</el-menu-item>
                        <el-menu-item index="/roleListView">角色权限</el-menu-item>
                        <el-menu-item index="/department">部门管理</el-menu-item>
                        <el-menu-item index="6-4">操作日志</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="header-bar">
                    <span style="background-color: black;">Header</span>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import {
    Menu,
    House,
    OfficeBuilding,
    AlarmClock,
    FolderChecked,
    DataAnalysis,
    Setting,
} from '@element-plus/icons-vue'
</script>

<style scoped>
.sidebar {
    background: #111;
    color: #fff;
    min-height: 100vh;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
    padding-right: 0;
}

.logo {
    display: flex;
    align-items: center;
    height: 64px;
    padding-left: 18px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}

.logo .title {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
}

.el-menu-vertical-demo {
    border-right: none;
    background: #111;
}

.header-bar {
    background: #f5f6fa;
    color: #222;
    font-size: 16px;
    font-weight: bold;
}
</style>